// 引入react
import React from "react";
// ReactDOM用来做浏览器端的项目的
// ReactNative用来做app端项目的
import ReactDOM from "react-dom/client";

// import { BrowserRouter as Router } from "react-router-dom";

// import "./28-higou-router/assets/reset.css";

//todo 第一步，引入react-redux里面的Provider
//todo Provider需要套在App组件的外面,需要有一个store属性
import { Provider } from "react-redux";
// import store from "./21-react-redux2/store";
// import store from "./22-react-redux-async-thunk/store";
// import store from "./23-react-redux-async-saga/store";
// import store from "./24-react-redux-modules/store";
// import store from "./26-redux-immutable/store";
import store from "./33-rtk/store";

// import App from "./01-nest/App";
// import App from "./02-style/01-style";
// import App from "./02-style/02-class";
// import App from "./02-style/04-classnames";
// import App from "./02-style/05-cssinjs";
// import App from "./03-props/01-props";
// import App from "./03-props/02-default";
// import App from "./03-props/03-type";
// import App from "./03-props/04-slot";
// import App from "./03-props/05-name-slot";
// import App from "./04-state/01-state";
// import App from "./04-state/02-setState";
// import App from "./05-event/01-this";
// import App from "./05-event/02-arg";
// import App from "./06-form/01-form";
// import App from "./06-form/02-form2";
// import App from "./06-form/03-file";
// import App from "./07-todolist/App";
// import App from "./08-stateup/App";
// import App from "./09-portal/App";
// import App from "./10-modal/App";
// import App from "./11-context/App";
// import App from "./12-context-counter/App";
// import App from "./13-todolist/App";
// import App from "./14-old-lifecycle/App";
// import App from "./15-new-lifecycle/App";
// import App from "./16-hoc/App";
// import App from "./17-ref/01-ref1";
// import App from "./17-ref/02-ref2";
// import App from "./18-hooks/01-useState";
// import App from "./18-hooks/02-useEffect";
// import App from "./18-hooks/03-useCallback";
// import App from "./18-hooks/04-useMemo";
// import App from "./18-hooks/05-useRef";
// import App from "./18-hooks/06-useRef2";
// import App from "./18-hooks/07-useReducer";
// import App from "./18-hooks/08-useContext";
// import App from "./18-hooks/09-useImperativeHandle";
// import App from "./18-hooks/10-useLayoutEffect";
// import App from "./18-hooks/11-useDebugValue";
// import App from "./18-hooks/12-useId";
// import App from "./18-hooks/13-useDeferredValue";
// import App from "./18-hooks/14-useTransition";
// import App from "./20-react-redux/App";
// import App from "./21-react-redux2/App";
// import App from "./22-react-redux-async-thunk/App";
// import App from "./23-react-redux-async-saga/App";
// import App from "./24-react-redux-modules/App";
// import App from "./25-immutable/App";
// import App from "./26-redux-immutable/App";
// import App from "./27-router-v5/01-basic";
// import App from "./27-router-v5/02-params";
// import App from "./27-router-v5/03-query";
// import App from "./27-router-v5/04-nest";
// import App from "./27-router-v5/05-render";
// import App from "./27-router-v5/06-redirect";
// import App from "./27-router-v5/07-auth";
// import App from "./27-router-v5/08-navLink";
// import App from "./27-router-v5/09-prevent";
// import App from "./27-router-v5/10-404";
// import App from "./28-higou-router/App";
// import App from "./28-higou-router/Router";
// import App from "./29-router-v6/01-basic";
// import App from "./29-router-v6/02-params";
// import App from "./29-router-v6/03-query";
// import App from "./29-router-v6/04-nest";
// import App from "./29-router-v6/05-404";
// import App from "./29-router-v6/06-navLink";
// import App from "./29-router-v6/07-redirect";
// import App from "./29-router-v6/08-navigate";
// import App from "./29-router-v6/09-auth";
// import App from "./29-router-v6/10-routes";
// import App from "./30-lazy/App";
// import App from "./31-router-lazy/App";
// import App from "./32-mock/App";
import App from "./33-rtk/App";

// 使用函数来创建组件
// 定义组件的时候，首字母需要大写
// 首字母大写的就是组件，小写的就是标签
// const App = (props) => {
//   return <div>hello {props.str}!</div>;
// };

// 使用类class的方式来创建组件
// 在类组件里面不知道怎么办的时候，打印以下this
// class App extends React.Component {
//   // 类里面必须要有render函数
//   render() {
//     // console.log(this);
//     const { str } = this.props;
//     return <div>hello {str}!</div>;
//   }
// }

// 挂载到root元素上面
const root = ReactDOM.createRoot(document.getElementById("root"));
// 里面要写jsx
// 允许我们在js文件里面写类似于html的代码,用大括号显示变量等
// 写的这个html会被转成虚拟dom的对象
// root.render(app({ str: "react" }));
root.render(
  <Provider store={store}>
    {/* // <Router> */}
    <App />
    {/* // </Router> */}
  </Provider>
);

// store.subscribe(() => {
//   root.render(<App />);
// });
